<template>
  <!-- 首页、积分签到 -->
  <div class="points">
    <van-nav-bar title="积分签到" left-arrow @click-left="onClickLeft" />
    <!-- 当前等级 -->
    <div class="row points-text">
      <div class="col-7 points-text-one">
        <p>当前等级</p>
        <h4>
          Lv：<span>{{ level }}</span>
        </h4>
        <p>
          经验值：<span>{{ exp }}</span
          >/2000
        </p>
        <p>
          当前积分：<span>{{ point }}</span>
        </p>
      </div>
      <div class="col-5 points-text-two">
        <img src="../assets/home/jifen.png" alt="" />
      </div>
    </div>

    <!-- 周期任务 -->
    <div class="point-sign row">
      <div class="col-12">
        <p>周期任务 <span>（每周日24:00重置）</span></p>
      </div>
      <div class="col-7">
        <p>每日签到 <span>（奖励随机翻倍）</span></p>
        <p>
          积分+<span>{{ n }}</span>
        </p>
      </div>
      <div class="col-5">
        <button :disabled="isDisable" @click="addPoint" ref="btn">
          {{ msg }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      point: 0, //当前累计积分
      n: 0, //签到随机获取的积分
      level: 1, //等级初始值为1
      exp: 0, //经验值
      isDisable: false, //签到按钮开局是可以点击的
      msg: "积分签到"
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back(-1);
    },
    addPoint() {
      //计算签到时间距离第二天0点之后方可签到
      //获取当前时间距离第二天时间的毫秒数
      var curDate = new Date(); //获取此刻的时间
      console.log("签到的时间：" + curDate.toLocaleString());
      var t1 = curDate.getTime(); //签到时间距离计算机元年的毫秒数
      console.log("签到时间距离计算机元年的毫秒数：" + t1);
      var tomorrow = new Date(curDate.getTime() + 24 * 60 * 60 * 1000); //后一天
      console.log("第二天时间：" + tomorrow.toLocaleDateString());
      var NextDay = new Date(tomorrow.toLocaleDateString());
      //console.log(NextDay);
      var t2 = NextDay.getTime(); //第二天距离计算机元年的毫秒数
      console.log("第二天距离计算机元年的毫秒数：" + t2);
      var timer = t2 - t1; //获取当前时间距离第二天时间的毫秒数
      console.log(timer + "毫秒后，可以进行下次签到");

      //点击按钮后执行，页面执行以下操作
      this.isDisable = true; //点击按钮后禁用
      this.msg = "已签到";
      this.$refs.btn.style.backgroundColor = "#D3D3D3"; //积分签到修改颜色
      this.n = Math.floor(Math.random() * 10) + 1; //得到每次签到获得的积分
      this.point = this.point + this.n; //累计积分
      this.exp = this.point % 2000; //通过积分算出经验值
      if (this.point < 2000) {
        this.level = 1;
      } else {
        this.level = Math.floor(this.point / 2000); //得出等级
      }
      //设置定时器，5秒后可再次签到
      setInterval(() => {
        this.isDisable = false;
        this.msg = "积分签到";
        this.$refs.btn.style.backgroundColor = "#ff851b";
      }, timer);

      // 百度的方法，通过cookie,实现一天只能点一次
      // var arrStr = document.cookie.split("; ");
      // if (arrStr[0] != "n=2") {
      //   var exp = new Date(
      //     new Date() +
      //       86400000 -
      //       (new Date().getHours() * 60 * 60 +
      //         new Date().getMinutes() * 60 +
      //         new Date().getSeconds()) *
      //         1000
      //   );
      //   exp.setTime(exp.getTime());
      //   document.cookie = "n=2" + ";expires=" + exp.toGMTString();
      //   this.n = Math.floor(Math.random() * 10) + 1; //得到每次签到获得的积分
      //   this.point = this.point + this.n; //累计积分
      //   this.exp = this.point % 2000; //通过积分算出经验值
      //   if (this.point < 2000) {
      //     this.level = 1;
      //   } else {
      //     this.level = Math.floor(this.point / 2000); //得出等级
      //   }
      // } else {
      //   alert("您只能点击一次");
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
//iphone 5/SE
@media screen and (min-height: 568px) {
  .points-text-one h4 {
    margin-bottom: 3vh; //做媒体查询
  }
  .points-text-two {
    img {
      width: 18vh;
    }
  }
}

//iphone 6/7/8
@media screen and (min-height: 667px) {
  .points-text-one h4 {
    margin-bottom: 5vh; //做媒体查询
  }
}

//iphone 6/7/8 Plus
@media screen and (min-height: 736px) {
  .points-text-one h4 {
    margin-bottom: 6vh; //做媒体查询
  }
}

//iphone X
@media screen and (min-height: 812px) {
  .points-text-one h4 {
    margin-bottom: 5vh; //做媒体查询
  }
  .points-text-two {
    img {
      width: 15vh;
    }
  }
}

* {
  margin: 0;
  padding: 0;
}

.points {
  position: fixed;
  p {
    font-size: 0.9rem;
  }
  .points-text {
    margin-left: 1vh;
    margin-bottom: 5vh;
    span {
      color: #ff851b;
    }
  }

  .point-sign {
    margin-left: 1vh;
    span {
      font-size: 0.1rem;
    }
    & > :nth-child(1) {
      margin-bottom: 1vh;
    }

    & > :nth-child(2) {
      & > p:nth-child(2) {
        font-size: 0.1rem;
        span {
          color: #ff851b;
        }
      }
    }

    & > :nth-child(3) {
      button {
        width: 80px;
        height: 40px;
        border: 0px;
        border-radius: 15px;
        color: #fff;
        font-size: 14px;
        background-color: #ff851b;
      }
    }
  }
}
</style>